<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="">
  <meta name="keywords" content="鲸鱼">
	<title>区域用户分析</title>
	<link rel="stylesheet" href="css/daterangepicker.css">
	<link rel="stylesheet" href="css/style.css">
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/moment.min.js"></script>
	<script type="text/javascript" src="js/jquery.daterangepicker.js"></script>
	<script type="text/javascript" src="js/highchart.js"></script>
	<script type="text/javascript" src="js/grid.js"></script>
	<script type="text/javascript" src="js/common.js"></script>
	
	<style>
		.show-area{display: none;}
		.search-area .date{margin-left: 0;}
	</style>
	<script>
		$(function(){
			$('#date-select').dateRangePicker({
				showShortcuts: false,
				beforeShowDay: function(t)
				{
					var n = new Date();
					n.setDate(n.getDate()-1);
					var m = n.getTime();
					var valid = !(t.getTime()>m);  //disable saturday and sunday
					var _class = '';
					var _tooltip = valid ? '' : '超过当天日期不可选';
					return [valid,_class,_tooltip];
				}
			}
			);
			cycleSelect('天');

			//全部省点击操作
		  $('.all-pros').click(function(){
		    if(!$('.citys').is(':animated')){
		      $('.citys').slideToggle();
		    }
		  });
		});

		function checkInfo2(){
			var date = $('#date-select').val().toString();
		  var startDate  = date.split('~')[0].toString();
		  var endDate  = date.split('~')[1].toString();
		  var max = parseInt($('.selected-days-num').text());
		  var province = $('.provinces').find('li.on').text();
		  if(province == '' || province == null){
		    alert('省份不能为空');
		    $('.show-area').hide();
		  }else if(!$('.kind span').hasClass('on')){
	      alert('投资产品不能为空');
	      $('.show-area').hide();
	    }else if(max>30){
        alert('统计周期为天，日期最长不能超过1个月');
        $('.show-area').hide();
      }else{
		  	$('.show-area').show();
		  }
			
		}
	</script>
</head>
<body>
	<div class="analyseBox">
		<p class="head-title">区域用户分析</p>
		<div class="search-area">
			<div class="area1">
				<div class="date">
					<label for="date-select">选择日期：</label><input type="text" id="date-select" size="30">
				</div>
			</div>
			<div class="area2">
				<span>选择区域：</span>
				<div class="divs">
					<div class="provinces">
						<ul>
							<li class="all-pros">全部省</li>
							<li>福建</li>
							<li>广东</li>
						</ul>
					</div>
					<div class="citys">
						<ul>
							<li class="all-citys on">全部市</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="products">
				<span>投资产品：</span>
				<div class="kind">
					<span class="on">活期</span>
					<span class="on">保险箱</span>
					<span class="on">定期1年</span>
					<span class="on">日增息</span>
				</div>
			</div>
			<div>
				<input type="button" value="查询" class="search" onclick="checkInfo2()">
			</div>
		</div>
		<div class="show-area">
			<div class="box">
				<div class="opespan">
					<p class="chart-title">用户分析（各年龄段）</p>
					<p class="operator"><span>全屏查看</span></p>
				</div>
				<div class="sexdiv">
					<a href="" class="export">导出数据↓</a>
					<div>
						<label>用户性别：</label><span class="on">男性</span><span class="on">女性</span><span class="on">未知性别</span>
					</div>
				</div>
				<div class="tablediv">
				<table class="table" cellpadding="0" cellspacing="0" border="2" border-spacing='0' bordercolor="#000">
					<tr>
						<th rowspan="2">年龄</th>
						<th rowspan="2">注册用户</th>
						<th rowspan="2">绑卡用户</th>
						<th colspan="3">投资用户</th>
						<th rowspan="2">投资订单数</th>
						<th colspan="3">投资金额</th>
						<th colspan="5">累计用户统计</th>
					</tr>
					<tr class="tr2">
						<td>首投用户数</td>
						<td>复投用户数</td>
						<td>投资用户数</td>
						<td>首投用户</td>
						<td>复投用户</td>
						<td>合计金额</td>
						<td>注册用户</td>
						<td>绑卡用户</td>
						<td>绑卡转化率</td>
						<td>投资用户</td>
						<td>投资转化率</td>
					</tr>
					<tr>
						<td>0-20岁</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
					</tr>
					<tr>
						<td>0-20岁</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
					</tr>
				</table>
				</div>
			</div>
			<div class="box">
				<div class="opespan">
					<p class="chart-title">用户分析（地区）</p>
					<p class="operator"><span>全屏查看</span></p>
				</div>
				<div class="sexdiv">
					<a href="" class="export">导出数据↓</a>
				</div>
				<div class="tablediv">
				<table class="table" cellpadding="0" cellspacing="0" border="2" border-spacing='0' bordercolor="#000">
					<tr>
						<th rowspan="2">地区</th>
						<th rowspan="2">注册用户</th>
						<th rowspan="2">绑卡用户</th>
						<th colspan="3">投资用户</th>
						<th rowspan="2">投资订单数</th>
						<th colspan="3">投资金额</th>
						<th colspan="5">累计用户统计</th>
					</tr>
					<tr class="tr2">
						<td>首投用户数</td>
						<td>复投用户数</td>
						<td>投资用户数</td>
						<td>首投用户</td>
						<td>复投用户</td>
						<td>合计</td>
						<td>注册用户</td>
						<td>绑卡用户</td>
						<td>绑卡率</td>
						<td>投资用户</td>
						<td>投资率</td>
					</tr>
					<tr>
						<td>0-20岁</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
					</tr>
					<tr>
						<td>0-20岁</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
						<td>81</td>
					</tr>
				</table>
				</div>
			</div>
		</div>
	</div>
</body>
</html>